<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>已选择的课程</title>
    <style type="text/css">
        <!--
        /************ Table ************/
        .xwtable {width: 50%;border-collapse: collapse;border: 1px solid #ccc;}
        .xwtable thead td {font-size: 12px;color: #333333;text-align: center; repeat-x top center;border: 1px solid #ccc; font-weight:bold;}
        .xwtable tbody tr {background: #fff;font-size: 12px;color: #666666;}
        .xwtable tbody tr.alt-row {background: #f2f7fc;}
        .xwtable td{line-height:20px;text-align: left;padding:4px 10px 3px 10px;height: 18px;border: 1px solid #ccc;}
        -->
    </style>
    <script src="../js/jquery-1.7.2.js"></script>
</head>
<body>
<h3><span id="showUser"></span>的已选课程</h3>
<table id="list" style="border-style: solid;border-width: 2px" class="xwtable">
</table>
<script>
    $(function (){
        function getCookie(name) {
            var prefix = name + "="
            var start = document.cookie.indexOf(prefix)
            if (start == -1) {
                return null;
            }
            var end = document.cookie.indexOf(";", start + prefix.length)
            if (end == -1) {
                end = document.cookie.length;
            }
            var value = document.cookie.substring(start + prefix.length, end)
            return unescape(value);
        }
        var username = getCookie("username");
        $("#showUser").html(username);
        loadTable()
        function loadTable(){
            $.ajax({
                type:"GET",
                url:"/user/findselected",
                success: function(r){
                    if(!r.ok){
                        alert(r.msg)
                        window.location = "/login.html"
                    }
                    $("#list").empty();
                    $("#list").append("<tr>\n" +
                        "        <th>课程号</th>\n" +
                        "        <th>课程名称</th>\n" +
                        "        <th>授课教师</th>\n" +
                        "        <th>教室容量</th>\n" +
                        "        <th>当前选课人数</th>\n" +
                        "        <th>操作</th>\n" +
                        "    </tr>")
                    $("#page").empty();
                    let courses = r.result.data;
                    for (let i=0; i<courses.length; i++){
                        console.log(courses[i])
                        let c = courses[i];
                        $("#list").append("<tr><td>"+c.id+"</td><td>"+c.courseName+"</td><td>"+c.teacherName+"</td>" +
                            "<td>"+c.croomCapacity+"</td><td>"+c.selectCount+"</td>" +
                            "<td><a href='javascript:;' id='cancelSelect' val="+"'"+c.id+"'"+">不选这门课了</a></td>"+
                            "</tr>");
                    }
                }
            });
        }
        $(document).on('click', '#cancelSelect',function(event) {
            let cid = $(event.target).attr("val");
            $.ajax({
                type:"get",
                url:"/user/cancelselect?courseId="+cid,
                success: function(r){
                    alert(r.msg)
                    if(r.ok){
                        loadTable()
                    }
                }
            });
        });
    })

</script>
</body>
</html>